<template>
    <div class="finish">
        <Step :step="4"></Step>
        <div class="title textColor">{{ $t('注册成功') }}</div>
        <div class="title1 textColor">{{ $t('开启您的数字货币之旅') }}</div>
        <p class="mt-64 pl-72">
            <i @click="agreeInfo">
                <img v-show="agree1" src="../../assets/image/login/prot2.png" alt="" />
                <img  v-show="!agree1" src="../../assets/image/login/prot1.png" alt="" />
            </i>
            {{ $t('我已同意授权调用系统信息通知权限') }}
        </p>
        <p class="mt-51 pl-72">
            <i @click="agreeAddress">
                <img  v-show="agree2" src="../../assets/image/login/prot2.png" alt="" />
                <img  v-show="!agree2" src="../../assets/image/login/prot1.png" alt="" />
            </i>
            {{ $t('我已同意授权访问地址簿') }}
        </p>
        <div class="content mt-50" @click="$router.push('/trade/btc')">
            <div class="left">
                <div class="font-40">{{ $t('我想要买币') }}</div>
                <div class="font-31 mt-60">{{ $t('去交易') }}<img src="../../assets/image/login/Vector.png" alt="">
                </div>
            </div>
            <div class="right pic1">
                <img src="./img/buyPic.png" alt="">
            </div>
        </div>
        <div class="content mt-33" @click="$router.push('/recharge/rechargeList')">
            <div class="left">
                <div class="font-40">{{ $t('我想要充值') }}</div>
                <div class="font-31 mt-60">{{ $t('去充值') }}<img src="../../assets/image/login/Vector.png"
                        alt="" /></div>
            </div>
            <div class="right pic2">
                <img src="./img/rechargePic.png" alt="">
            </div>
        </div>
        <div class="btn mt-32 btnMain" @click="$router.push('/')">{{ $t('确定') }}</div>
    </div>
</template>

<script>
import Step from "./step.vue";
    export default {
        props: {

        },
        components: {
            Step
        },
        data(){
            return {
                agree1:true,
                agree2:true,
            }
        },
        methods: {
            agreeInfo(){
                this.agree1 = !this.agree1
            },
            agreeAddress() {
                this.agree2 = !this.agree2
            }
        }
    }
</script>

<style lang="scss" scoped>
.finish{
    padding: 32px;
    font-size: 26px;
    width: 100%;
    box-sizing: border-box;
}
.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 65px;
    text-align: center;
}
.title1{
    font-weight: 700;
    font-size:44px;
    text-align: center;
    margin-top: 32px;
}
p{
    display: flex;
    align-items: center;
    color: #868D9A;
    i{
        display: block;
        margin-right: 18px;
        box-sizing: border-box;
        img {
                width: 30px;
                height: 30px;
            }
    }
}
.content{
    background: $cont_background;
    border-radius: 8px;
    padding: 0 35px;
    display: flex;
    justify-content: space-between;
    height: 220px;
    align-items: center;
    color: $text_color;
    .left{
        img{
            width: 22px;
            height: 22px;
            margin-left: 12px;
        }
    }
    .pic1{
        width: 140px;
        height: 152px;
        img {
                width: 100%;
                height: 100%;
            }
    }
    .pic2{
        width: 152px;
        height: 132px;
        img{
            width: 100%;
            height: 100%;
        }
    }
}
.btn {
    color: #000;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    border-radius: 10px;
}
</style>